export default class PictureEditWebSocket {
  private pictureId: number
  private socket: WebSocket | null
  private eventHandlers: Record<string, Array<(data?: any) => void>>
  private baseUrl: string

  // 新增baseUrl参数，允许从外部传入WebSocket服务地址
  constructor(pictureId: number, baseUrl?: string) {
    this.pictureId = pictureId
    this.socket = null
    this.eventHandlers = {}

    // 优先使用传入的地址，否则使用环境变量或默认地址
    this.baseUrl = baseUrl || import.meta.env.VITE_WS_BASE_URL || "ws://localhost:8080";
  }

  /**
   * 初始化WebSocket连接
   */
  connect() {
    // 确保之前的连接已关闭
    if (this.socket) {
      this.disconnect()
    }

    // 构建完整连接地址
    const url = `${this.baseUrl}/ws/picture/edit?pictureId=${this.pictureId}`;
    console.log('尝试连接WebSocket:', url);

    try {
      this.socket = new WebSocket(url);

      // 配置二进制类型
      this.socket.binaryType = 'blob';

      // 监听连接成功事件
      this.socket.onopen = () => {
        console.log('WebSocket连接已建立');
        this.triggerEvent('open');
      };

      // 监听消息事件
      this.socket.onmessage = (event) => {
        try {
          const message = JSON.parse(event.data);
          console.log('收到消息:', message);
          const type = message.type;
          this.triggerEvent(type, message);
        } catch (error) {
          console.error('解析WebSocket消息失败:', error, '原始数据:', event.data);
          this.triggerEvent('parseError', { error, data: event.data });
        }
      };

      // 监听连接关闭事件
      this.socket.onclose = (event) => {
        console.log(`WebSocket关闭: 代码=${event.code}, 原因=${event.reason}`);
        this.triggerEvent('close', event.code, event.reason);
      };

      // 监听错误事件
      this.socket.onerror = (error) => {
        console.error('WebSocket发生错误:', error);
        this.triggerEvent('error', error);
      };
    } catch (error) {
      console.error('创建WebSocket实例失败:', error);
      this.triggerEvent('error', error);
    }
  }

  /**
   * 关闭WebSocket连接
   */
  disconnect() {
    if (this.socket) {
      // 1000表示正常关闭
      this.socket.close(1000, '客户端主动关闭');
      this.socket = null;
    }
  }

  /**
   * 检查连接是否活跃
   * @returns true表示连接活跃，false表示未连接或已关闭
   */
  isActive(): boolean {
    return this.socket?.readyState === WebSocket.OPEN;
  }

  /**
   * 发送消息到后端
   * @param message 消息对象
   */
  sendMessage(message: object) {
    if (this.isActive()) {
      try {
        this.socket?.send(JSON.stringify(message));
        console.log('消息已发送:', message);
      } catch (error) {
        console.error('发送WebSocket消息失败:', error);
        this.triggerEvent('sendError', error);
      }
    } else {
      const error = new Error('WebSocket未连接，无法发送消息');
      console.error(error.message, message);
      this.triggerEvent('sendError', error);
    }
  }

  /**
   * 添加自定义事件监听
   * @param type 消息类型
   * @param handler 消息处理函数
   */
  on(type: string, handler: (data?: any) => void) {
    if (!this.eventHandlers[type]) {
      this.eventHandlers[type] = [];
    }
    this.eventHandlers[type].push(handler);
  }

  /**
   * 触发事件
   * @param type 消息类型
   * @param data 消息数据
   */
  private triggerEvent(type: string, ...data: any[]) {
    const handlers = this.eventHandlers[type];
    if (handlers) {
      handlers.forEach(handler => handler(...data));
    }
  }
}

